<template>
  <div class="FormRenderBtn" v-if="flowOperationBtnShow">
    <div class="btns">
      <el-button v-for="(operation,index) in flowOperationBtnShow" :key="index"
                 @click="submitForm({operation:operation})">
        {{ getOperationName(operation) }}
      </el-button>
    </div>
  </div>
</template>
<script setup name="FormRenderBtn">
import {G} from "@/views/flow/globalVar.js";
const props = defineProps({
  flowOperationBtnShow: {
    type: Array,
    default: () => {
      return undefined
    }
  }
})
const getOperationName = (operation) => {
  let index = Object.values(G.FORM_BUTTON).findIndex(item => {
    return item === operation
  })
  return G.FORM_BUTTON_NAME[Object.keys(G.FORM_BUTTON)[index]]
}
const emits = defineEmits(['submitForm',
  'resetForm'])
const submitForm = ({operation}) => {
  emits('submitForm',
      {operation})
}
const resetForm = () => {
  emits('resetForm')
}
</script>
<style scoped lang="scss">
.FormRenderBtn {
  border-top: 1px solid #eee;
  padding: 12px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .btns {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .el-form-item__content {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
